<template>
  <div class="playCoupon" :style="{minHeight:$store.state.minHeight+'rem'}">
    <myHead title="优惠券"></myHead>
    <div class="list">
      <div class="list_left">
          <p><span style="font-size: .25rem">￥</span><span>30</span></p>
          <p>满100元可用</p>
      </div>
      <div class="list_right">
          <p>来西亚英女皇钟楼七日游（含 门票索道、摆渡车）</p>
          <p>有效期：2020.05.01-2020.05.18</p>
      </div>
    </div>
    <div :class="data.receive?'receive btn':'btn'" @click="clk">{{data.receive?'已领取':'立即领取'}}</div>
  </div>
</template>

<script>
  import myHead from "../../components/ClientComponents/lib/myHead";

  export default {
    name: "playCoupon",
    components: {
      myHead
    },
    data(){
      return {
        data:{receive:false}
      }
    },
    methods:{
      clk(){
        this.data.receive = true;
      }
    }
  }
</script>

<style scoped>
  .playCoupon {
    width: 100%;
    box-sizing: border-box;
    background-color: #F5F5F5;
    padding: .6rem .1rem 0 .1rem;
  }

  .list {
    width: 3.5rem;
    height: 1.05rem;
    background-image: url("../../../static/img/youhuijuan511.png");
    background-size: 100% 100%;
    margin: .1rem auto;
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .list_left {
    width: 1.1rem;
    display: flex;
    flex-flow: column;
    justify-content: center;
    text-align: center;
  }
  .list_left>p {
    color: #FFFFFF;
    font-family:PingFang SC;
    font-weight:500;
  }
  .list_left>p:nth-child(1) {
    font-size:.4rem;
    margin-bottom: .1rem;
  }
  .list_left>p:nth-child(2) {
    font-size:.12rem;
  }
  .list_right {
    width: calc(100% - 1.1rem);
    height: 100%;
    box-sizing: border-box;
    padding: .15rem;
    display: flex;
    flex-flow: column;
    justify-content: space-around;
  }
  .list_right>p:nth-child(1) {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #202020;
    line-height:.24rem;
  }
  .list_right>p:nth-child(2) {
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #999999;
  }

  .btn {
    width:3.45rem;
    height:.5rem;
    border:.01rem solid rgba(255,111,2,1);
    background:linear-gradient(90deg,rgba(255,142,65,1) 0%,rgba(255,110,0,1) 100%);
    border-radius:.03rem;
    font-size:.16rem;
    font-family:PingFang SC;
    font-weight:500;
    text-align: center;
    line-height: .5rem;
    color: #FFFFFF;
    margin: .3rem auto;
  }
  .receive {
    background:rgba(224,224,224,1);
    color: #999999;
    border-color:rgba(224,224,224,1);
  }
</style>
